<template>
  <div class="app-container">
    <el-card class="box-card components-container">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="学生姓名" prop="name">
              {{ form.name }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学号" prop="sutudentNo">
              {{ form.sutudentNo }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生昵称" prop="nickName">
              {{ form.nickName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="密码" prop="password">
              {{ form.password }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="phone">
              {{ form.phone }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="gender">
              <!-- <el-input v-model="form.gender" placeholder="请输入性别：0女 1男" /> -->
              <el-radio-group v-model="form.gender" disabled>
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生头像" prop="headerImage">
              <el-image style="width: 100px; height: 100px" :src="form.headerImage"
                :preview-src-list="form.srcList"></el-image>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="phone">
              {{ form.phone }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="birthday">
              {{ form.birthday }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属专业" prop="specialityId">
              {{ form.specialityName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属年级" prop="gradeId">
              {{ form.gradeName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属班级" prop="classId">
              {{ form.className }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="validFlag">
              <el-radio-group v-model="form.validFlag" disabled>
                <el-radio :label="1">有效</el-radio>
                <el-radio :label="0">无效</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <editor v-model="form.remark" :min-height="10" disabled />
        </el-form-item>
        <el-form-item label="已选课程">
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in form.tcourseInfoVos" :key="item.id">
            <!-- {{ item.id }} -->
            <el-card class="box-card components-container" :body-style="{ padding: '0px' }">
              <div class="card-head">
                <img :src="'/dev-api' + item.resultImage" class="user-avatar">
                {{ item.name }}
              </div>
              <div class="card-body">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="card-content">完成单元数：11</div>
                  </el-col>
                  <el-col :span="12">
                    <div class="card-content">完成任务数：27</div>
                  </el-col>
                  <el-col :span="12">
                    <div class="card-content">完成进度：20%</div>
                  </el-col>
                  <el-col :span="12">
                    <div class="card-content">授课教师：{{ item.creatorName }}</div>
                  </el-col>
                </el-row>
                <div class="bottom clearfix">
                  <time class="time">{{ item.createTime }}</time>
                  <el-button type="success" plain class="button" @click="handleView(item.id)">查看详情</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import { getStudent } from "@/api/student/student";

export default {
  name: "studentDetail",
  data() {
    return {
      form: {
        name: '',
        sutudentNo: '',
        nickName: '',
        password: '',
        phone: '',
        gender: '',
        headerImage: '',
        birthday: '',
        specialityName: '',
        gradeName: '',
        className: '',
        validFlag: '',
        remark: '',
        srcList: []
      },
      // 课程表格数据
      tCourseInfoVos: [],
      loading: true
    };
  },
  created() {
    this.getStudentDetail();
  },
  watch: {
    '$route.params': {
      immediate: true,
      handler() {
        console.log(this.$route.name);
        if (this.$route.name == 'studentDetail') {
          this.getStudentDetail();
        }
      }
    }
  },
  methods: {
    // onSubmit() {
    //     console.log('submit!');
    // },
    getStudentDetail() {
      var id = this.$route.query.id
      this.loading = true;
      getStudent(id).then(response => {


        response.data.headerImage = "/dev-api" + response.data.headerImage
        response.data.srcList = [response.data.headerImage];
        this.form = response.data;
        this.tCourseInfoVos = response.data.tCourseInfoVos;
        this.loading = false;

        console.log("數據：");
        console.log(this.form.tcourseInfoVos)
      });
    },
    handleSelectionChange() {

    },
    removeCourse(row) {
      console.log(row.id);
      var reClassCourseData = {
        courseIds: [row.id],
        classId: this.$route.query.id
      }
      this.$modal.confirm('是否确认移除编号为"' + row.id + '"的课程？').then(function () {
        return delReClassCourse(reClassCourseData);
      }).then(() => {
        this.getClassDetail();
        this.$modal.msgSuccess("移除成功");
      }).catch(() => { });
    },
    /** 详情按钮操作 */
    handleView(id) {
      this.handleToDetailPage(id)
    },
    // 跳转到任务详情页面(路由跳转)
    handleToDetailPage(id) {
      this.$router.push({
        name: 'studentRecord',
        query: {
          id: id,
          studentId: this.$route.query.id
        },
      });
    }
  },
  filters: {
    remark(value) {
      if (!value) {
        return
      } else {
        if (value.length > 10) {
          var target = value.substr(0, 10) + '....'
        } else {
          target = value
        }
        return target;
      }
    },
  }
};
</script>
<style>
.card-head {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  background-color: purple;
  padding: 20px;
  color: white;
  font-size: 20px;
}

.card-body {
  padding: 20px;
}

.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-right: 10px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 15px;
  line-height: 12px;
}

.button {
  padding: 6px;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.card-content {
  font-size: 12px;
  line-height: 20px;
  color: #999;
}
</style>
